<template>
  <div class="com-container">
    <div
      class="title"
      :style=comStyle
    >
      <span>{{ '▎' +showTitle }}</span>
      <span
        class="iconfont title-icon"
        :style=comStyle
        @click="showChoice = !showChoice"
      >&#xe6eb;</span>
      <div
        class="select-con"
        v-show="showChoice"
      >
        <div
          class="select-item"
          :style=marginStyle
          v-for="item in selectTypes"
          :key="item.key"
          @click="handleSelect(item.key)"
        >
          {{ item.text}}
        </div>
      </div>
    </div>
    <div
      class="com-charts"
      ref="trend_ref"
    >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      echartInstance: null, //echarts实例化对象
      allData: null, //服务器获取的所有数据
      showChoice: false, // 是否显示可选项
      choiceType: "map", // 显示的数据类型
      titleFontSize: 0, //字体的大小
    };
  },
  computed: {
    ...mapState(["theme"]),

    selectTypes() {
      if (!this.allData) {
        return [];
      } else {
        return this.allData.type.filter((item) => {
          return item.key !== this.choiceType;
        });
      }
    },
    showTitle() {
      if (!this.allData) {
        return "";
      } else {
        return this.allData[this.choiceType].title;
      }
    },
    //计算字体大小
    comStyle() {
      return {
        fontSize: this.titleFontSize + "px",
      };
    },
    //左边距为一个像素单位
    marginStyle() {
      return {
        marginLeft: this.titleFontSize / 2 + "px",
      };
    },
  },

  watch: {
    theme() {
      console.log("主题切换了");
      this.echartInstance.dispose(); //销毁当前的图表
      this.initecharts(); //重新初始化图标
      this.screenAdapter();
      this.updateecharts();
    },
  },

  created() {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallBack("trendData", this.getData);
  },
  //页面加载完执行
  mounted() {
    this.initecharts();
    //this.getData();
    // 发送数据给服务器, 告诉服务器, 我现在需要数据
    this.$socket.send({
      action: "getData",
      socketType: "trendData",
      chartName: "trend",
      value: "",
    });
    //监听窗口变化
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    // 在组件销毁的时候, 进行回调函数的取消
    this.$socket.unRegisterCallBack("trendData");
  },
  methods: {
    //1. 初始化echarts
    initecharts() {
      this.echartInstance = this.$echarts.init(
        this.$refs.trend_ref,
        this.theme
      ); //初始化

      //对echarts组件初始化
      const initOption = {
        grid: {
          left: "3%",
          top: "35%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        //提示
        tooltip: {
          trigger: "axis",
        },
        //图例位置
        legend: {
          left: 20,
          top: "15%",
          icon: "circle",
        },
        xAxis: {
          type: "category",
          boundaryGap: false, //初始化数据是否紧挨边缘
        },
        yAxis: {
          type: "value",
        },
      };
      this.echartInstance.setOption(initOption);
    },
    //2. 获取数据
    getData(ret) {
      //const { data:ret} = await this.$axios.get('trend');
      this.allData = ret;
      console.log(this.allData);
      this.updateechart();
    },
    //  async getData(){
    //   const { data:ret} = await this.$axios.get('trend');
    //   this.allData = ret;
    //   console.log(this.allData);
    //   this.updateechart();
    //  },

    updateechart() {
      // 半透明的颜色值
      const colorArr1 = [
        "rgba(11, 168, 44, 0.5)",
        "rgba(44, 110, 255, 0.5)",
        "rgba(22, 242, 217, 0.5)",
        "rgba(254, 33, 30, 0.5)",
        "rgba(250, 105, 0, 0.5)",
      ];
      // 全透明的颜色值
      const colorArr2 = [
        "rgba(11, 168, 44, 0)",
        "rgba(44, 110, 255, 0)",
        "rgba(22, 242, 217, 0)",
        "rgba(254, 33, 30, 0)",
        "rgba(250, 105, 0, 0)",
      ];
      //处理数据
      //获取x轴的数据
      const xdata = this.allData.common.month;

      //获取y轴数据
      const ydata = this.allData[this.choiceType].data;

      const seriesArr = ydata.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          data: item.data,
          stack: this.choiceType,
          areaStyle: {
            //颜色填充
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[index],
              }, // %0的颜色值
              {
                offset: 1,
                color: colorArr2[index],
              }, // 100%的颜色值
            ]),
          },
        };
      });

      //图例数据
      const legenddata = ydata.map((item) => {
        return item.name;
      });

      const updateOption = {
        xAxis: {
          data: xdata,
        },
        legend: {
          data: legenddata,
        },
        series: seriesArr,
      };
      this.echartInstance.setOption(updateOption);
    },

    //分辨率自适应
    screenAdapter() {
      this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        legend: {
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize,
          textStyle: {
            fontSize: this.titleFontSize / 2,
          },
        },
      };
      this.echartInstance.setOption(adapterOption);
      this.echartInstance.resize();
    },
    handleSelect(currentType) {
      this.choiceType = currentType;
      this.updateechart();
      this.showChoice = false; //隐藏条目
    },
  },
};
</script>

<style lang='less' scoped>
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: white;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-con {
    background: #222733;
  }
  .select-item {
    cursor: pointer;
  }
}
</style>
